<template>
  <view>
    <u-popup mode="center" :round="10" :show="show" :closeable="true" @close="close" @open="open">
      <view class="auth-box">
        <view class="header">
          <img src="@/static/images/authHeadImg.png" alt="" />
          <text class="header-title">抱歉，您的牵线服务已用完</text>
        </view>
        <view class="content">
          <view class="content-item">
            <view class="item-text">
              <view class="title">
                <img class="icon-img" src="@/static/images/auth-vip.png" alt="" />
                <text class="font-bold">开通VIP会员</text>
              </view>
              <view class="tips">红娘免费为您牵线</view>
            </view>
            <view class="btn">
              <button type="default" class="btn-open">立即开通</button>
            </view>
          </view>

          <view class="content-item">
            <view class="item-text">
              <view class="title">
                <img class="icon-img" src="@/static/images/auth-xindong.png" alt="" />
                <text class="font-bold">红娘牵线服务套餐</text>
              </view>
              <view class="tips">更划算的红娘牵线服务</view>
            </view>
            <view class="btn">
              <button type="default" class="btn-open">立即开通</button>
            </view>
          </view>

          <view class="content-item">
            <view class="item-text">
              <view class="title">
                <img class="icon-img" src="@/static/images/auth-qianxian.png" alt="" />
                <text class="font-bold">单次红娘牵线服务</text>
              </view>
              <view class="tips">99元/次</view>
            </view>
            <view class="btn">
              <button type="default" class="btn-open">立即开通</button>
            </view>
          </view>
        </view>
        <view class="dialog-tips">
          <img src="@/static/images/auth-tips.png" alt="" />
          <text class="dialog-tips-text">红娘将努力促成双方自愿交换联系方式，不包成功。牵线失败将退回牵线次数。</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.auth-box {
  padding: 40rpx;
  .content {
    .content-item {
      border-radius: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgb(244, 244, 244);
      padding: 30rpx;
      margin-bottom: 20px;
      .item-text {
        .tips {
          margin-top: 20rpx;
          font-size: 24rpx;
          color: rgb(153, 153, 153);
        }
        .title {
          display: flex;
          align-items: center;
          .icon-img {
            width: 32rpx;
            height: 28rpx;
          }
          .font-bold {
            margin-left: 10rpx;
            font-weight: bold;
            font-size: 30rpx;
          }
        }
      }
      .btn {
        margin-left: 150rpx;
        .btn-open {
          background: linear-gradient(to right, #e5aafd, #feccfe);
          color: black;
          display: flex;
          border-radius: 30px;
          justify-content: center;
          align-items: center;
          font-size: 24rpx;
          // width: 116rpx;
          // height: 32rpx;
          // padding: 16rpx 24rpx;
        }
      }
    }
  }
  .dialog-tips {
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    img {
      width: 20rpx;
      height: 20rpx;
    }
    .dialog-tips-text {
      margin-left: 10rpx;
      color: #333;
      font-size: 24rpx;
    }
  }
  .header {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 52px;
      height: 62px;
    }
    .header-title {
      font-weight: bold;
      margin: 10px 0;
    }
  }
}
</style>
